<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { props } from './privilege';
import { ElMessage } from 'element-plus';
import useStore from '@/store';
defineOptions({ name: 'Privilege' });
const _props = defineProps(props);
const apps = ref(null);
const privileges = ref(null);
const treeRef = ref(null);
const resourceIds = ref([]);
const getApps = async () => {
  await window.$api.app.getApps().then(res => {
    apps.value = res.data;
    //organizationLoading.value = false;
  });
};
const getPrivileges = async () => {
  await window.$api.privilege.getPrivileges(_props.window.params.master, _props.window.params.id).then(res => {
    privileges.value = res.data;
    if (privileges.value) {
      let appIds = [];
      for (let key in privileges.value) {
        let item = privileges.value[key];
        if (item.access.toLowerCase() == 'app') {
          appIds.push(item.accessValue);
        } else if (item.access.toLowerCase() == 'resource') {
          resourceIds.value.push(item.accessValue);
        }
      }
      treeRef.value.setCheckedKeys(appIds);
    }

    //organizationLoading.value = false;
  });
};
const save = async () => {
  var appIds = treeRef.value.getCheckedKeys();
  if (_props.window.params) {
    await window.$api.privilege.setPrivilege(_props.window.params.master, _props.window.params.id, appIds, resourceIds.value).then(res => {
      ElMessage.success('权限设置成功!');
      useStore.window.windowRemove('Privilege');
    });
  }
};
onMounted(() => {
  getApps();
  if (_props.window.params) {
    getPrivileges();
  }
});
</script>

<template>
  <windows-window :window="window" class="privilege">
    <template #button>
      <windows-button-group size="18">
        <windows-button icon="fluent-save-28-regular" @click="save"></windows-button>
      </windows-button-group>
    </template>
    <el-tree
      ref="treeRef"
      :data="apps"
      :props="{
        label: 'name',
      }"
      node-key="id"
      show-checkbox
      default-expand-all
      highlight-current
      check-strictly
      :expand-on-click-node="false"
    >
      <template #default="scope">
        <div class="custom-node">
          <div class="custom-node-modules">
            <el-image :src="scope.data.icon" style="width: 20px" fit="contain" v-if="scope.data.icon" />
            <span>{{ scope.node.label }}</span>
          </div>
          <div class="custom-node-operates">
            <el-checkbox-group size="small" v-model="resourceIds">
              <el-checkbox v-for="item in scope.data.resources" :key="item.id" :label="item.id" border>
                {{ item.name }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </template>
    </el-tree>
  </windows-window>
</template>
<style lang="scss">
.privilege {
  .el-tree-node__content {
    height: auto;
    font-size: 12px;
  }
  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background-color: rgb(220 220 220 / 15%);
  }
  .el-tree-node__content:hover {
    background: rgb(220 220 220 / 15%);
  }
}
</style>
<style scoped lang="scss">
.custom-node {
  display: flex;
  padding: 5px;
  .custom-node-modules {
    display: flex;
    align-items: center;
    span {
      margin-left: 5px;
    }
  }
  .custom-node-operates {
    display: flex;
    .el-checkbox-group {
      display: flex;
      flex-wrap: wrap;
      .el-checkbox {
        margin: 10px;
      }
    }
  }
}
</style>
